<style lang="less">
    @import "./home.less";
    @import "../../styles/common.less";
</style>
<template>
    <div class="home-main">
        <Row :gutter="10">
            <Col :xs="24" :sm="12" :md="4" :style="{marginBottom: '10px'}">
                <infor-card
                    id-name="visit_count"
                    :end-val="count.visit"
                    iconType="ios-eye"
                    color="#64d572"
                    :iconSize="50"
                    :intro-text="$t('countVisit')"
                ></infor-card>
            </Col>
            <Col :xs="24" :sm="12" :md="4" :style="{marginBottom: '10px'}">
                <infor-card
                    id-name="user_created_count"
                    :end-val="count.createUser"
                    iconType="android-person-add"
                    color="#2d8cf0"
                    :intro-text="$t('userCreatedToday')"
                ></infor-card>
            </Col>
            <Col :xs="24" :sm="12" :md="4" :style="{marginBottom: '10px'}">
                <infor-card
                    id-name="api_working_count"
                    :end-val="count.workingAPI"
                    iconType="shuffle"
                    color="#f25e43"
                    :intro-text="$t('apiWorkingToday')"
                ></infor-card>
            </Col>
            <Col :xs="24" :sm="12" :md="4" :style="{marginBottom: '10px'}">
                <infor-card
                    id-name="api_created_count"
                    :end-val="count.createAPI"
                    iconType="android-add"
                    color="#99CC00"
                    :intro-text="$t('apiCreatedToday')"
                ></infor-card>
            </Col>
            <Col :xs="24" :sm="12" :md="4" :style="{marginBottom: '10px'}">
                <infor-card
                    id-name="api_remove_count"
                    :end-val="count.removeAPI"
                    iconType="android-remove"
                    color="#666633"
                    :iconSize="50"
                    :intro-text="$t('apiRemovedToday')"
                ></infor-card>
            </Col>
            <Col :xs="24" :sm="12" :md="4" :style="{marginBottom: '10px'}">
                <infor-card
                    id-name="api_sum_count"
                    :end-val="count.sumAPI"
                    iconType="ios-infinite"
                    color="#ffd572"
                    :intro-text="$t('apiSum')"
                ></infor-card>
            </Col>
        </Row>
        <Row :gutter="10" class="margin-top-10">
            <Col :md="24" :lg="8" :style="{marginBottom: '10px'}">
                <Card>
                    <p slot="title" class="card-title">
                        <Icon type="android-map"></Icon>
                        上周每日来访量统计
                    </p>
                    <div class="data-source-row">
                        <visite-volume></visite-volume>
                    </div>
                </Card>
            </Col>
            <Col :md="24" :lg="8" :style="{marginBottom: '10px'}">
                <Card>
                    <p slot="title" class="card-title">
                        <Icon type="ios-pulse-strong"></Icon>
                        数据来源统计
                    </p>
                    <div class="data-source-row">
                        <data-source-pie></data-source-pie>
                    </div>
                </Card>
            </Col>
            <Col :md="24" :lg="8">
                <Card>
                    <p slot="title" class="card-title">
                        <Icon type="android-wifi"></Icon>
                        各类用户服务调用变化统计
                    </p>
                    <div class="data-source-row">
                        <user-flow></user-flow>
                    </div>
                </Card>
            </Col>
        </Row>
        <Row class="margin-top-10">
            <Card>
                <p slot="title" class="card-title">
                    <Icon type="ios-shuffle-strong"></Icon>
                    上周每日服务调用量(万)
                </p>
                <div class="line-chart-con">
                    <service-requests></service-requests>
                </div>
            </Card>
        </Row>
    </div>
</template>

<script>
import dataSourcePie from './components/dataSourcePie.vue';
import visiteVolume from './components/visiteVolume.vue';
import serviceRequests from './components/serviceRequests.vue';
import userFlow from './components/userFlow.vue';
import countUp from './components/countUp.vue';
import inforCard from './components/inforCard.vue';

export default {
    name: 'home',
    components: {
        dataSourcePie,
        visiteVolume,
        serviceRequests,
        userFlow,
        countUp,
        inforCard        
    },
    data () {
        return {
            count: {
                createUser: 496,
                visit: 3264,
                createAPI: 15,
                removeAPI: 5,
                sumAPI: 45,
                workingAPI: 14
            }            
        };
    },
    computed: {
        avatorPath () {
            return localStorage.avatorImgPath;
        }
    },
    methods: {
        
    }
};
</script>
